<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">

    </div>
    <table>
        <th>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄段</td>
        </th>
    </table>
</body>
<script src="../react.js"></script>
<script src="../react-dom.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
    let isSex = true;
    let age = 14;
    function isAge(age){
        if(age<10){
            return <h1>少年</h1>
        }else if(age>=10 && age<18){
            return "青年"
        }else{
            return "成年"
        }
    }
    // 1. 创建虚拟dom
    let div = (
        <div>
            <h1>
                {
                    //使用三目运算法则进行条件判断 （表达式）
                }
                {isSex?'男':'女'}
            </h1>
            <h2>
                {isAge(age)}
            </h2>
              
            {
                /* 逻辑运算符条件判断 当前 运算符前面条件满足时 才会渲染 运算符后面结果*/ 
                age<10 && <h1>少年</h1>
            }
            {
                (age>=10&&age<18) && <h2>青年</h2>
            }
            {
                age>=18 && <h3>成年</h3>
            }
        </div>
    )
    ReactDOM.render(div,document.getElementById("root"))


    
    /* 
        list=[
            {
                name:"张三",
                age:18,
                sex:true
            },
            {
                name:"李四",
                age:8,
                sex:false
            },{
                name:"王红",
                age:15,
                sex:false
            }
        ]
    */
</script>
</html>